<template>
  <view :style="style" :class="tagClass" @click="onClick" :id="elId">
    <slot />
  </view>
</template>
<script>
  export default {
    inject: ['row'],
    props: {
      span: [Number, String],
      offset: [Number, String]
    },
    data() {
      const elId = `ui_col_${Math.ceil(Math.random() * 10e5).toString(36)}`
      return {
        elId,
        width: ''
      }
    },
    computed: {
      gutter: function gutter() {
        return this.$parent && Number(this.$parent.gutter) || 0;
      },
      style: function style() {
        var padding = this.gutter / 2 + "upx";
        let paddingStyle = `${this.gutter ? (';padding-left:'+padding+';padding-left:'+padding+';') : ''}`
        return `width : ${this.width} ${this.gutter ? paddingStyle : '' }`

      },
      tagClass() {
        var span = this.span,
          offset = this.offset;
        return `ui-col ${span ? ('ui-col--' + span) :""} ${offset ? ('ui-col--offset-' + offset) :""}`
      }
    },

    created() {
      this.row.children.push(this)
    },
    methods: {
      onClick: function onClick(event) {
        this.$emit('click', event);
      },

      /**
       * @param {Object} rowWidth  父元素的宽度
       * fixed:  小程序中子组件会存在一个隐藏的page元素，其宽度为父元素的100%，这样子组件的元素设置50%的时候就不是按照父元素的宽度设置了，而是按照本身的宽度设置
       */
      resetWidth(rowWidth) {
        this.width = rowWidth / 24 * this.span + 'px';
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ui-col {
    float: left;
    box-sizing: border-box;
    min-height: 1px;
  }

  // @for $i from 1 through 24 {
  //   .ui-col.ui-col--#{$i} {
  //     width: 100% / 24 * $i;
  //   }

  //   .ui-col.ui-col--offset-#{$i} {
  //     margin-left: 100% / 24 * $i;
  //   }
  // }
</style>
